<template>
    <a href="/AddMemberView">新增会员</a>
    姓名：
    <input type="text" v-model="query.Name">
    会员类型：
    <select v-model="query.LevelId">
        <option value="0">请选择</option>
        <option value="1">大床房</option>
        <option value="2">双人床</option>
        <option value="3">豪华套间</option>
        <option value="4">总统套房</option>
    </select>
    性别：
    <input type="text" v-model="query.Sex">
    <input type="button" value="查询" @click="cha ">
    <div> 
        <table border="1">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="selectallstate" @change="selectall">
                    </th>
                    <th>名称</th>
                    <th>性别</th>
                    <th>房间号</th>
                    <th>房间类型</th>
                    <th>爱好</th>
                    <th>爱好总数</th>
                    <th>图片</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <th>
                        <input type="checkbox" v-model="idlist" :value="d.Id">
                    </th>
                    <th>{{ d.Name }}</th>
                    <th>{{ d.Sex }}</th>
                    <th>{{ d.Num }}</th>
                    <th>{{ d.LevelName }}</th>
                    <th>{{ d.Hobby }}</th>
                    <th>{{ d.HobbyCount }}</th>
                    <th>
                        <img :src="'https://localhost:7212/'+d.Img" style="width: 100px; height: 100px;"   >
                    </th>
                    <th>
                        <input type="button" value="编辑" @click="Update(d.Id)">
                    </th>
                </tr>
            </tbody>
        </table>
        一共 {{querydata.count}}  条
        当前 {{ query.PageIndex }}  页
        一共{{ querydata.pagecount }}  页
        一页 {{ query.PageSize }}  条
        <input type="button" v-for="d in querydata.pagecount" :value="d" @click="YS(d)">
        
        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        每页
        <input type="number" v-model="query.PageSize" @click="Zhuan">
        条
        <input type="button" value="批量逻辑删除" @click="Del">
    </div> 
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import moment from 'moment';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/Index';
const userinfo=useUserStore();
const router=useRouter();

const rout=useRouter();

const Update=(val:any)=>{
    rout.push({path:'/UpdateView',query:{Id:val}})
}


const idlist=ref([0]);
const selectallstate=ref(false);

const Del=()=>{
    if(confirm('确定删除吗？')){
        axios.delete("https://localhost:7212/api/Home/RangeDeltet",{params:{Id:idlist.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('批量删除成功')
            Show();
        }
        else{
            alert('失败')
        }
    })
    }
    
}

const selectall=()=>{
    if(selectallstate.value==true){
        for(var i=0;i<data.value.length;i++){
            idlist.value.push(data.value[i].Id);
        }
    }
    else{
        idlist.value=[0];
    }
}


const cha=()=>{
    query.value.PageIndex=1;
    Show();
}

const YS=(d:any)=>{
    query.value.PageIndex=d;
    Show();
}

const Zhuan=()=>{
    Show();
}

onMounted(()=>{
    getlogin();
})

const getlogin=()=>{
    if(userinfo.data.name==""){
        alert('请先登入')
        router.push({path:'/LoginView'})
    }
}


const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }
    if(val==4){
        query.value.PageIndex=querydata.value.pagecount;
        Show();
    }
}


const data=ref([{
    "Id": 0,
  "Name": "string",
  "Sex": "string",
  "Num": "string",
  "LevelId": 0,
  "Hobby": "string",
  "HobbyCount": 0,
  "Img": "string",
  "Delete": true,
  LevelName:""
}])


const query=ref({
    Name:"",
    LevelId:0,
    Sex:"",
    PageIndex:1,
    PageSize:2

})

const querydata=ref({
    count:0,
    pagecount:0
})

onMounted(()=>{
    Show()
})


const Show=()=>{
    axios.get("https://localhost:7212/api/Home/GetHome",{params:query.value}).then(res=>{
        data.value=res.data.list;
        querydata.value.count=res.data.count;
        querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize)
    })
}



</script>

